<template>
  <div>
    <!-- 头部 -->
    <head-top signin-up="home">
      <span slot="logo" class="head_logo" @click="reload">YHF.me</span>
    </head-top>
    <nav class="city_nav mr2">
      <div class="city_tip">
        <span>当前定位城市:</span>
        <span>定位信息如不准确，请手动选择列表中的城市</span>
      </div>
      <router-link :to="'/city/' + guessCityid" class="guess_city">
        <span>{{guessCity}}</span>
        <svg-icon class="arrow_right" icon-class="rightArrow"/>
      </router-link>
    </nav>
    <!-- 热门城市 -->
    <section class="hot_city_container mr2">
      <h4 class="city_title">热门城市</h4>
      <ul class="citylistul clear">
        <router-link
          tag="li"
          v-for="item in hotcity"
          :to="'/city/' + item.id"
          :key="item.id"
        >{{item.name}}</router-link>
      </ul>
    </section>
    <!-- 所有城市 -->
    <div class="group_city_container mr2" ref="foodsWrapper">
      <ul class="letter_classify">
        <li
          v-for="(value,key,index) in sortgroupcity"
          :key="key"
          class="letter_classify_li food-list-hook"
        >
          <h4 class="city_title">
            {{key}}
            <span v-if="index == 0">（按字母排序可滚动）</span>
          </h4>
          <ul class="groupcity_name_container citylistul clear">
            <router-link
              tag="li"
              v-for="item in value"
              :to="'/city/' + item.id"
              :key="item.id"
              class="ellipsis"
            >{{item.name}}</router-link>
          </ul>
        </li>
      </ul>
    </div>
    <!-- A-Z右边框列表 -->
    <div class="alphabet" ref="menuWrapper">
      <ul>
        <li
          class="item"
          v-for="(item,i) in letters"
          :key="i"
          :class="{'current':currentIndex === i}"
          @click="selectMenu(i)"
        >{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import headTop from "@/components/header/head";
import BScroll from "better-scroll";
import API from "@/api/";
export default {
  data() {
    return {
      test: "abc",
      guessCity: "", //当前城市
      guessCityid: "", //当前城市id
      hotcity: [], // 热门城市列表
      groupcity: {}, // 所有城市列表
      scrolly: 0, // 记录滑动位置
      listHeight: [], // 存储滑动高度总表
      letters: [] // 记录所有城市的字母（右边框）
    };
  },
  mounted() {
    // 获取当前定位城市
    API.cityGuess().then(res => {
      this.guessCity = res.name;
      this.guessCityid = res.id;
    });
    // 获取热门城市数据
    API.cityHot().then(res => {
      this.hotcity = res;
    });
    // 获取所有城市数据
    API.cityGroup().then(res => {
      this.groupcity = res;
      this.$nextTick(() => {
        this._initScroll();
        this._calculateHeight();
      });
    });
  },
  computed: {
    //将获取的数据按照A-Z字母开头排序
    sortgroupcity() {
      let sortobj = {};
      var letters = [];
      for (let i = 65; i <= 90; i++) {
        if (this.groupcity[String.fromCharCode(i)]) {
          sortobj[String.fromCharCode(i)] = this.groupcity[
            String.fromCharCode(i)
          ];
          letters.push(String.fromCharCode(i));
        }
      }
      this.$set(this, "letters", letters);
      return sortobj;
    },
    // 右侧字母跟随
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        const height1 = this.listHeight[i];
        const height2 = this.listHeight[i + 1];

        if (!height2 || (this.scrolly >= height1 && this.scrolly < height2)) {
          return i;
        }
      }
      return 0;
    }
  },
  components: {
    headTop
  },
  methods: {
    //点击图标刷新页面
    reload() {
      window.location.reload();
    },
    /**
     * 点击字母，左侧联动
     * @param {number} i key值循环数组中到第几个
     */
    selectMenu(i) {
      let foodList = this.$refs.foodsWrapper.getElementsByClassName(
        "food-list-hook"
      );
      let el = foodList[i];

      this.foodsScroll.scrollToElement(el, 300);
    },
    /**
     * 初始化滚动事件
     */
    _initScroll() {
      this.meunScroll = new BScroll(this.$refs.menuWrapper, { click: true });
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        click: true,
        probeType: 3
      });
      this.foodsScroll.on("scroll", pos => {
        this.scrolly = Math.abs(Math.round(pos.y));
      });
    },
    /**
     * 记录每个li的高度位置
     */
    _calculateHeight() {
      let foodList = this.$refs.foodsWrapper.getElementsByClassName(
        "food-list-hook"
      );

      let height = 0;
      this.listHeight.push(height);

      for (let i = 0; i < foodList.length; i++) {
        const item = foodList[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";
// 头部
.head_logo {
  left: 0.4rem;
  font-weight: 400;
  @include sc(0.7rem, #fff);
  @include ct;
}

// 定位城市
.city_nav {
  padding-top: 2.35rem;
  border-top: 1px solid $bc;
  background-color: #fff;
  margin-bottom: 0.4rem;
  .city_tip {
    @include fj;
    line-height: 1.45rem;
    padding: 0 0.45rem;
    span:nth-of-type(1) {
      @include sc(0.55rem, #666);
    }
    span:nth-of-type(2) {
      font-weight: 900;
      @include sc(0.475rem, #9f9f9f);
    }
  }
  .guess_city {
    @include fj;
    align-items: center;
    height: 1.8rem;
    border: 1px solid $bc;
    padding: 0 0.45rem;
    border-width: 1px 0 2px 0;
    @include font(0.75rem, 1.8rem);
    span:nth-of-type(1) {
      color: $blue;
    }
    .arrow_right {
      @include wh(0.6rem, 0.6rem);
      fill: #999;
    }
  }
}

// 热门城市
.hot_city_container {
  background-color: #fff;
  margin-bottom: 0.4rem;
}
.city_title {
  color: #666;
  font-weight: 400;
  text-indent: 0.45rem;
  border: 2px solid $bc;
  border-width: 2px 0 1px 0;
  @include font(0.55rem, 1.45rem, "Helvetica Neue");
  span {
    @include sc(0.475rem, #999);
  }
}
.citylistul {
  li {
    float: left;
    text-align: center;
    color: $blue;
    border: 2px solid $bc;
    border-width: 0 1px 1px 0;
    @include wh(25%, 1.75rem);
    @include font(0.6rem, 1.75rem);
  }
  li:nth-of-type(4n) {
    border-right: none;
  }
}
.letter_classify_li {
  margin-bottom: 0.4rem;
  background-color: #fff;
  border-bottom: 1px solid $bc;
  .groupcity_name_container {
    li {
      color: #666;
    }
  }
}

// 所有城市
.group_city_container {
  height: 23.1rem;
  overflow: hidden;
}

// A-z
.alphabet {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 40px;
  width: 20px;
  right: 0;
  bottom: 0;
  background: #a5dff9;
  z-index: 1;
  .item {
    text-align: center;
    line-height: 20px;
    font-size: 12px;
  }
  .current {
    color: red;
  }
}

// 公共右margin 20
.mr2 {
  margin-right: 20px;
}
</style>
